

/**
 * 搓牌
 */
const maxAngle = 5 // 搓牌角度
cc.Class({
    extends: cc.Component,

    properties: {
        rootNode: cc.Node, //当前牌的节点

        poker: cc.Node, //牌值的节点
        pokerMask: cc.Mask, //牌值的遮罩
        maskBgNode: cc.Mask, //花色的遮罩
        bgNode: cc.Node, //背景节点

        shadowNode1: cc.Sprite,	// 阴影
        shadowNode2: cc.Sprite,

        spriteFrameList: [cc.SpriteFrame],	// 遮罩
        shadowSpriteFrameList: [cc.SpriteFrame],	// 横竖阴影

        _rotate: 0,

        _direction: 1,	// 左下右下

        _isLandscape: true,	// 是否为横向
        _isAnimBol: false,	// 是否达到翻牌的要求
        _isTouch: true,	// 是否开启触摸
        _isRollback: false,	// 是否回滚到了初始状态
        _isAnimDone: false,	// 翻拍动作是否完成

        _offPos: 0
    },

    onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_START, this.onStart, this)
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onMove, this)
        this.node.on(cc.Node.EventType.TOUCH_END, this.onEnd, this)
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onCancel, this)

        this.m_LastPos = 0;
        this.Wsize = cc.winSize;
        this.nodeW = this.poker.width;
        this.nodeH = this.poker.height;
    },

    onStart: function (event) {
        this._isRollback = false
        this.m_LastPos = event.touch.getLocation(); //记录上一次点的位置

        this._direction = (this.m_LastPos.x <= this.Wsize.width / 2);//

        if (this.m_LastPos.x < this.Wsize.width / 3) {
            this._direction = 0
        } else if (this.m_LastPos.x > this.Wsize.width * 2 / 3) {
            this._direction = 2
        } else {
            this._direction = 1
        }
    },

    onMove: function (event) {
        if (this._isTouch == false) return	// 是否禁用触摸

        this._isRollback = false

        var pos = event.touch.getLocation()
        var y = pos.y - this.m_LastPos.y

        var showMaskPos = (this._isLandscape == true) ? this.pokerMask.node.y : this.pokerMask.node.x;
        var limit = (this._isLandscape == true) ? 450 : 600
        console.log("===========onMove============",showMaskPos,limit);
        if (showMaskPos > limit) {
            this._isAnimBol = true

            this.openAnimation()	// 达到指定位置，开牌
            return
        } else {
            this._isAnimBol = false
        }

        this.updatePosition(y)

        this.m_LastPos = pos
    },

    onEnd: function (evt) {
        if (this._isAnimBol == false) {	// 结束触摸事件时，如果没触发翻牌事件，则回滚到初始状态
            this._isRollback = (this.pokerMask.node.y != 0 || this.pokerMask.node.x != 0)	// 开启回滚定时器
        }
    },

    onCancel: function (evt) {
        if (this._isAnimBol == false) {	// 结束触摸事件时，如果没触发翻牌事件，则回滚到初始状态
            this._isRollback = true	// 开启回滚定时器
        }
    },

    updatePosition: function (y) {
        this._offPos += y
        this._offPos = this._offPos < 0 ? 0 : this._offPos

        var showMaskPos = this._isLandscape == true ? this.pokerMask.node.y : this.pokerMask.node.x

        var ratio = this.getScaleRatio(showMaskPos)	// 缩放比例
        var angle = this.getAngle(showMaskPos - 20)	// 旋转比例
        var opacity = this.getOpacity(showMaskPos)
        this.shadowNode1.node.opacity = opacity
        this.shadowNode2.node.opacity = opacity

        if (showMaskPos > 30) {
            if (this._isLandscape == true) {
                this.pokerMask.spriteFrame = this.spriteFrameList[0]
                this.maskBgNode.spriteFrame = this.spriteFrameList[0]
            } else {
                this.pokerMask.spriteFrame = this.spriteFrameList[2]
                this.maskBgNode.spriteFrame = this.spriteFrameList[2]
            }
        } else {
            this.pokerMask.spriteFrame = this.spriteFrameList[1]
            this.maskBgNode.spriteFrame = this.spriteFrameList[1]
        }

        if (this._isLandscape == true) {
            this.pokerMask.node.setScale(ratio, 1)
            this.shadowNode2.node.setScale(ratio, 1)

            if (this._direction == 0) {	// 左
                this.poker.skewX = -angle
                this.poker.angle = angle
            } else if (this._direction == 1) {	// 中
                this.poker.skewX = 0
                this.poker.angle = 0
            } else {	// 右
                this.poker.skewX = angle
                this.poker.angle = -angle
            }

            if (this.pokerMask.node.y < 0) {
                this.pokerMask.node.y = 0;
                this._isRollback = false
            } else {
                this.pokerMask.node.y += y
            }

            if (this.poker.y < -this.nodeH) {
                this.poker.y = -this.nodeH;
            } else {
                this.poker.y += y
            }

            if (this.maskBgNode.node.y < 0) {
                this.maskBgNode.node.y = 0;
            } else {
                this.maskBgNode.node.y += y
            }

            if (this.bgNode.y > 0) {
                this.bgNode.y = 0;
            } else {
                this.bgNode.y -= y
            }

            if (this.shadowNode1.node.y < 0) {
                this.shadowNode1.node.y = 0;
            } else {
                this.shadowNode1.node.y += y * 1.6
            }

            if (this.shadowNode2.node.y < 0) {
                this.shadowNode2.node.y = 0;
            } else {
                this.shadowNode2.node.y += y
            }
        } else {
            this.pokerMask.node.setScale(1, ratio)
            this.shadowNode2.node.setScale(1, ratio)

            if (this._direction == 0) {	// 左
                this.poker.skewY = angle
                this.poker.angle = angle
            } else if (this._direction == 1) {	// 中
                this.poker.skewY = 0
                this.poker.angle = 0
            } else {	// 右
                this.poker.skewY = -angle
                this.poker.angle = -angle
            }

            if (this.pokerMask.node.x < 0) {
                this.pokerMask.node.x = 0;
                this._isRollback = false
            } else {
                this.pokerMask.node.x += y
            }

            if (this.poker.x < -this.nodeW) {
                this.poker.x = -this.nodeW
            } else {
                this.poker.x += y
            }

            if (this.maskBgNode.node.x < 0) {
                this.maskBgNode.node.x = 0;
            } else {
                this.maskBgNode.node.x += y
            }

            if (this.bgNode.x > 0) {
                this.bgNode.x = 0;
            } else {
                this.bgNode.x -= y
            }

            if (this.shadowNode1.node.x < 0) {
                this.shadowNode1.node.x = 0;
            } else {
                this.shadowNode1.node.x += y * 1.6
            }

            if (this.shadowNode2.node.x < 0) {
                this.shadowNode2.node.x = 0;
            } else {
                this.shadowNode2.node.x += y
            }
        }
    },

    getOpacity: function (posY) {
        posY = posY < 0 ? 0 : posY
        var w = (this._isLandscape == true) ? this.nodeH : this.nodeW
        var temp = (posY / w) * 255 * 2
        temp = temp > 255 ? 255 : temp
        return temp
    },

    getAngle: function (posY) {
        posY = posY < 0 ? 0 : posY
        var w = (this._isLandscape == true) ? this.nodeH : this.nodeW
        var temp = (posY * 2 / w) * maxAngle
        temp = temp > maxAngle ? maxAngle : temp
        return temp
    },

    getScaleRatio: function (posY) {
        posY = posY < 0 ? 0 : posY
        var temp = (posY / (this.nodeH * 5)) + 1
        temp = temp < 1 ? 1 : temp
        return temp
    },

    // 开牌按钮
    onClickOpenBtn: function (evn, type) {
        this.openAnimation()
    },

    // 旋转按钮
    onClickRotateBtn: function (evn, type, _rotate) {
        var scale = 1
        var offtime = 0
        if (_rotate != null) { // 复原
            this._rotate = _rotate
        } else {	// 旋转
            if (this._rotate == 0) {
                scale = 0.85
                this._rotate = -90
            } else {
                scale = 1
                this._rotate = 0
            }
            offtime = 0.5
        }

        let self = this
        this._isTouch = false
        this.rootNode.runAction(
            cc.sequence(
                cc.spawn(
                    cc.scaleTo(offtime, scale, scale),
                    cc.rotateTo(offtime, this._rotate, this._rotate)
                ),
                cc.callFunc(function () { // 开启旋转后，禁用触摸
                    self._isTouch = true
                })
            )
        )

        if (this._rotate == 0) {
            this.shadowNode1.spriteFrame = this.shadowSpriteFrameList[0]
            this.shadowNode2.spriteFrame = this.shadowSpriteFrameList[0]
        } else if (this._rotate == -90) {
            this.shadowNode1.spriteFrame = this.shadowSpriteFrameList[1]
            this.shadowNode2.spriteFrame = this.shadowSpriteFrameList[1]
        }

        if (this._isAnimDone == false) {	// 设置横竖方向
            if (this._rotate == 0) {
                this._isLandscape = true
                this.initPosition(0, -(this.nodeH))
            } else if (this._rotate == -90) {
                this._isLandscape = false
                this.initPosition(-this.nodeW, 0)
            }
        } else {
            this.poker.setPosition(0, 0)
            this.pokerMask.node.setPosition(0, 0)
            this.maskBgNode.node.setPosition(0, 0)
            this.bgNode.setPosition(0, 0)
        }
    },

    // 开牌动画
    openAnimation: function () {
        this._isTouch = false
        this._isAnimDone = true
        this._isAnimBol = true

        this.initPosition(0, 0)
        this.pokerMask.node.setScale(1.2)
        this.pokerMask.node.runAction(
            cc.sequence(
                cc.scaleTo(0.2, 1, 1).easing(cc.easeBackInOut(0.5)),
                cc.callFunc(function () {
                    // if (self.cardCellJS) self.cardCellJS.fadeInNum()
                }),
                cc.delayTime(1)
            )
        )
    },

    initPosition: function (x, y) {
        this.poker.setPosition(x, y)

        this.pokerMask.node.setPosition(0, 0)
        this.maskBgNode.node.setPosition(0, 0)
        this.bgNode.setPosition(0, 0)
        this.shadowNode1.node.setPosition(0, 0)
        this.shadowNode2.node.setPosition(0, 0)

        this.poker.skewX = 0
        this.poker.skewY = 0
        this.poker.angle = 0
        this.shadowNode1.node.opacity = 0
        this.shadowNode2.node.opacity = 0

        this.pokerMask.spriteFrame = this.spriteFrameList[1]
        this.maskBgNode.spriteFrame = this.spriteFrameList[1]
    },

    update: function (dt) {
        // 回滚到初始位置
        if (this._isRollback == true && this._isAnimDone == false) {
            this.updatePosition(-20)
        }
    },

    onSetNodeVisible: function (_isShow) {
        _isShow = (_isShow == null || _isShow == undefined) ? false : _isShow
        this.node.active = _isShow
    }
});
